<template>
    <div class="edit-popup" style="width: 50vw">
        <popup
            ref="popupRef"
            title="累计签到设置"
            :async="true"
            width="50vw"
			:cancelButtonText="false"
			:confirmButtonText="false"
            @close="handleClose"
        >
            <div class="popup-div">
				<el-form ref="formRef" class="mb-[-16px] " :model="queryParams" :inline="true">
					<el-form-item label="创建时间" prop="name">
						<daterange-picker
						    class="w-[185px]"
							value-format="YYYY-MM-DD"
						    v-model:startTime="queryParams.start_time"
						    v-model:endTime="queryParams.end_time"
						/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="resetPage">查询</el-button>
						<el-button type="primary" @click="handleAdd">添加</el-button>
					</el-form-item>
				</el-form>
                <div class="table-div" style="overflow-y: auto">
					<el-tabs  class="demo-tabs">
					    <!-- 表格 -->
					    <el-table
					        size="large"
					        :data="tableData"
					        @selection-change="handleSelectionChange"
					    >
							<el-table-column label="连续签到天数" prop="day" min-width="120" />
							<el-table-column label="赠送礼品券数量" prop="price" min-width="150" />
					        <el-table-column label="赠送优惠券" prop="name" min-width="200" />
							<el-table-column label="创建时间" prop="name" min-width="200" />
					        <el-table-column label="操作" min-width="160" fixed="right">
					            <template #default="{ row }">
					                <el-button
					                    type="primary"
					                    link
					                    @click="handleunder(row.id,1)"
					                   v-if="row.is_choice==2"
					                >
					                    关联直播间
					                </el-button>
					                <el-button
					                    type="warning"
					                    link
					                    @click="handleunder(row.id,2)"
										v-if="row.is_choice==1"
					                >
					                    取消关联
					                </el-button>
					                
					            </template>
					        </el-table-column>
					    </el-table>
						
					</el-tabs>
                </div>
            </div>
        </popup>
		<addPopup v-if="showAdd" ref="addRef" @success="getLists" @close="showAdd = false" />
    </div>
</template>
<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import Popup from '@/components/popup/index.vue'
	import feedback from '@/utils/feedback'
	import { roomMzGoodsList,roomMzGoodsChoice,roomMzGoodsNotChoice} from '@/api/live'
	import addPopup from './add.vue'
    const emit = defineEmits(['success', 'close'])
    const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const tableData = ref([]);
 
	const queryParams = reactive({
	    start_time: '',
		end_time:''
	});
	const { pager, getLists,resetPage} = usePaging({
	    fetchFun: roomMzGoodsList,
	    params: queryParams
	});
    // 打开弹窗
    const open = () => {
        popupRef.value?.open();
    };
	const ids = ref<any[]>([])
	const handleSelectionChange = (val: any[]) => {
	    ids.value = val.map((item) => {
	        return item.id
	    })
	}
    // 取消弹窗
    const handleClose = () => {
        emit('close', 0)
    };
	
	//上下架商品
	const handleunder = async (id: number, status: number) => {
	    await feedback.confirm(`确定要${status == 1 ? '关联直播间' : '取消关联'}`);
		if(status==1){
			await roomMzGoodsChoice({ room_id: queryParams.room_id, goods_ids:id });
		}else{
			await roomMzGoodsNotChoice({ room_id: queryParams.room_id, goods_id:id });
		}
		tableData.value = []
	   getLists().then((res) => {
	       tableData.value = res.list
	   });
	};
	
	
	const addRef = shallowRef<InstanceType<typeof addPopup>>()
	const showAdd = ref(false)
	const handleAdd = async () => {
	    showAdd.value = true
	    await nextTick()
	    addRef.value?.open()
	}
	
	
    const setFormData = (id:string) => {
        queryParams.room_id = id;
        getLists().then((res) => {
            tableData.value = res.list
        });
    };
	console.log(tableData)
    //提交
   

    defineExpose({
        open,
        setFormData
    });
</script>

<style lang="scss" scoped>
    .popup-div {
        height: 60vh;
        display: flex;
        flex-direction: column;
        .popup-div-title {
            position: sticky;
            top: 0;
            z-index: 999;
            background-color: #ffffff
        }
    }
</style>
